<?php
	$sql = "select fecha, sum(visualizacion) as visualizacion, sum(click) as click, sum(link) as  link, sum(contacto) as contacto 
			from visitas_unicas as vu
			where producto_id ='$id'
			group by fecha order by fecha ASC";
	$rs  = $db->Execute($sql);
	$Visitas = $rs->GetRows();
?>
<script type="text/javascript" src="<?php echo URL;?>/js/table_sorter/jquery.tablesorter.js"></script> 
<link rel="stylesheet" href="<?php echo URL;?>/js/table_sorter/themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />

<table id="myTable" class="tablesorter" >
	<thead>
	<tr>
		<th>Período</th>
		<th style='text-align:center;'>Visualizaciones en el Listado</th>
		<th style='text-align:center;'>Visualizaciones de su Ficha</th>
		<th style='text-align:center;'>Derivados a su Web</th>
		<th style='text-align:center;'>Consultas Generadas</th>
	</tr>
	</thead>
	<tbody>
		<?php
			$t_visualiza = 0;
			$t_click     = 0;
			$t_link      = 0;
			$t_contacto  = 0;
		?>
	
	<?php foreach($Visitas as $v){?>
		<tr>
			<td style='text-align:center;'><?php echo $v['fecha'];?></td>
			<td style='text-align:center;'><?php echo number_format($v['visualizacion'],0,',','.');?></td>
			<td style='text-align:center;'><?php echo number_format($v['click'],0,',','.');?></td>
			<td style='text-align:center;'><?php echo number_format($v['link'],0,',','.');?></td>
			<td style='text-align:center;'><?php echo number_format($v['contacto'],0,',','.');?></td>
		</tr>
		<?php
			$t_visualiza = $t_visualiza + $v['visualizacion'];
			$t_click     = $t_click + $v['click'];
			$t_link      = $t_link + $v['link'];
			$t_contacto  = $t_contacto + $v['contacto'];
		?>
	<?php } ?>
	</tbody>
	<tfoot>
		<tr>
			<td style='text-align:right;'>Totales</td>
			<td style='text-align:center;'><?php echo number_format($t_visualiza,0,',','.');?></td>
			<td style='text-align:center;'><?php echo number_format($t_click,0,',','.');?></td>
			<td style='text-align:center;'><?php echo number_format($t_link,0,',','.');?></td>
			<td style='text-align:center;'><?php echo number_format($t_contacto,0,',','.');?></td>
		</tr>
	</tfoot>
</table>
<script type="text/javascript">
	$(document).ready(function() { 
		$("#myTable").tablesorter();
</script>


<script type="text/javascript" src="https://www.google.com/jsapi"></script>

  <div class='grid_8'>
    <h3 style='text-align:left;margin-bottom:20px;'>Visualizaciones totales de anuncio: <?php echo $t_visualiza;?></h3>   
    <?php if(!empty($Visitas)) {?>        
        <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Año/Mes', 'Visitas'],
              <?php foreach($Visitas as $v){ ?>
                  ['<?php echo $v["fecha"];?>',  <?php echo $v["visualizacion"];?>],
              <?php } ?>
            ]);


       new google.visualization.LineChart(document.getElementById('chart_div')).
          draw(data, {curveType: "function",
                  title: 'Visualizaciones del Anuncio, dentro del listado general',
                      width: 900, height: 500}
              );

          }
      </script>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
    <?php } ?>
  </div>






  <div class='grid_8'>
    <h3 style='text-align:left;margin-bottom:20px;'>Visualizaciones totales de su Micrositio: <?php echo $t_click;?></h3>    
    <?php if(!empty($Visitas)) {?>        
        <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Año/Mes', 'Visitas'],
              <?php foreach($Visitas as $v){ ?>
                  ['<?php echo $v["fecha"];?>',  <?php echo $v["click"];?>],
              <?php } ?>
            ]);


       new google.visualization.LineChart(document.getElementById('chart_click')).
          draw(data, {curveType: "function",
                  title: 'Visitas por Mes a su Micrositio',
                      width: 900, height: 500}
              );

          }
      </script>
      <div id="chart_click" style="width: 900px; height: 500px;"></div>
    <?php } ?>      
  </div>


  <div class='grid_8'>
    <h3 style='text-align:left;margin-bottom:20px;'>Usuarios enviados a su Web: <?php echo $t_link;?></h3>       
    <?php if(!empty($Visitas)) {?>    
        <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Año/Mes', 'Enlaces'],
              <?php foreach($Visitas as $v){ ?>
                  ['<?php echo $v["fecha"];?>',  <?php echo $v["link"];?>],
              <?php } ?>
            ]);


       new google.visualization.LineChart(document.getElementById('chart_enlaces')).
          draw(data, {curveType: "function",
                  title: 'Usuarios enviados a su web',
                      width: 900, height: 500}
              );

          }
      </script>
      <div id="chart_enlaces" style="width: 900px; height: 500px;"></div>
    <?php } ?>    
  </div>


  <div class='grid_8'>
    <h3 style='text-align:left;margin-bottom:20px;'>Consultas generadas: <?php echo $t_contacto;?></h3>        
    <?php if(!empty($Visitas)) {?>
        <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Año/Mes', 'Enlaces'],
              <?php foreach($Visitas as $v){ ?>
                  ['<?php echo $v["fecha"];?>',  <?php echo $v["contacto"];?>],
              <?php } ?>
            ]);


       new google.visualization.LineChart(document.getElementById('chart_form')).
          draw(data, {curveType: "function",
                  title: 'Formularios de Consulta generados',
                      width: 900, height: 500}
              );

          }
      </script>
      <div id="chart_form" style="width: 900px; height: 500px;"></div>
    <?php } ?>
  </div>


